import React from 'react';
export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
export type RowAlignsTypes = 'top' | 'middle' | 'bottom' | 'stretch';

export type RowJustifyTypes =
  | 'start'
  | 'end'
  | 'center'
  | 'space-around'
  | 'space-between'
  | 'space-evenly';

export type ScreenMap = Record<Breakpoint, boolean>;

export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;

export interface YmRowProps extends React.HTMLAttributes<HTMLDivElement> {
  prefixCls?: string;
  gutter?: Gutter | [Gutter, Gutter];
  align?: Partial<Record<Breakpoint, RowAlignsTypes>> | RowAlignsTypes;
  justify?: Partial<Record<Breakpoint, RowJustifyTypes>> | RowJustifyTypes;
  wrap?: boolean;
  children?: React.ReactNode;
}

export interface ColSize {
  flex?: string | number;
  span?: number;
  order?: number;
  offset?: number;
}

export interface YmColProps extends React.HTMLAttributes<HTMLDivElement> {
  prefixCls?: string;
  flex?: string | number;
  span?: number;
  order?: number;
  offset?: number;
  xs?: number | ColSize;
  sm?: number | ColSize;
  md?: number | ColSize;
  lg?: number | ColSize;
  xl?: number | ColSize;
  xxl?: number | ColSize;
}
